<template>
  <div class="name">
        <div class="top">
            <TopBarVue :text="text"/>
        </div>
        <div class="conent">
            <van-field v-model="password" type="text"  placeholder="设置个性昵称(不超过20个字符)"
                :rules="[{ required: true, message: '请填写密码' }]" />
        </div>
        <p>昵称由中文、英文、数字、-和_组成。</p>
        <div class="button">
            <button @click="geted()" :class="{ active: password!=='' }">保存</button>
        </div>
  </div>
</template>

<script>
import TopBarVue from '@/components/TopBar.vue';
import { Toast } from 'vant';
import { bangUser } from '@/api/index.js'
export default {
    components: {
        TopBarVue
    },
    data() {
        return {
            text: '昵称',
            password: '',
            bloor: false,
            user:''
        }
    },
    mounted() {
        let userid = sessionStorage.getItem('userid')
        this.user = userid
        // console.log(this.user)
    },
    methods: {
        geted() {
            bangUser(this.user, this.password).then((ok) => {
                console.log(ok)
                Toast(ok.data.message+"成功");
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.name{
    overflow: auto;
    .conent{
        margin-top: 0.14rem;
    }
    p{
        font-size: 0.12rem;
        color: #999999;
        text-indent: 0.12rem;
        line-height: 0.18rem;
        margin: 0.12rem 0;
    }
    .button{
        width: 100%;
        height: 0.4rem;
        display: flex;
        button{
            width: 90%;
            margin: 0 5%;
            height: 0.4rem;
            font-size: 0.15rem;
            border-radius: 0.08rem;
            background-color: #cacaca;
            border: none;
        }
        .active{
            background-color: #eda200;
        }
    }
}
</style>